<template>
    <div class="filters">
        <el-row type="flex" class="filters-top" justify="space-between" align="middle">
            <el-col :span="8">
                单程： 
                {{ data.info.departCity }} - {{data.info.destCity}} 
                / 
                {{data.info.departDate}}
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="filterData">
                    <el-option
                    v-for="(item,index) in data.options.airport"
                    :key="index"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="flightTimes"  placeholder="起飞时间" @change="filterData">
                    <el-option
                    v-for="(item,index) in data.options.flightTimes"
                    :key="index"
                    :label="`${item.from}:00 - ${item.to}:00`"
                    :value="`${item.from},${item.to}`"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="company"  placeholder="航空公司" @change="filterData">
                    <el-option
                    v-for="(item,index) in data.options.company"
                    :key="index"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airSize" placeholder="机型" @change="filterData">
                    <el-option
                    v-for="(item,index) in sizeOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.size">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <div class="filter-cancel">
            筛选：
            <el-button 
                       type="primary" 
                       round 
                       plain 
                       size="mini" 
                       @click="handleFiltersCancel">
                撤销
    		</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
           type: Object,
           default: ()=>({}) 
        }
    },
    data(){
        return {
            airport: "",        // 机场
            flightTimes: "",    // 出发时间
            company: "",        // 航空公司
            airSize: "",        // 机型大小\
            sizeOptions: [
                {name: "大", size: "L"},
                {name: "中", size: "M"},
                {name: "小", size: "S"},
            ],
        }
    },
    methods: {
        filterData(){
            let res = this.data.flights; // 默认是完整的数据
            if(this.airport){
                // 筛选机场
                // console.log('筛选机场',this.airport);
                res = res.filter(item=>{
                    return item.org_airport_name == this.airport
                })
            }
            if(this.flightTimes){
                // 筛选出发时间
                console.log('筛选出发时间',this.flightTimes);
                let startTime = +this.flightTimes.split(',')[0];
                let endTime = +this.flightTimes.split(',')[1];
                res = res.filter(item=>{
                    let curTime = +item.dep_time.split(':')[0]
                    return curTime>=startTime&&curTime<endTime
                })
                // console.log(107,res);
            }
            if(this.company){
                // 筛选航空公司
                console.log('筛选航空公司',this.company);
                res = res.filter(item=>{
                    return item.airline_name === this.company
                })
            }
            if(this.airSize){
                // 筛选机型
                console.log('筛选机型',this.airSize);
                res = res.filter(item=>{
                    return item.plane_size === this.airSize
                })
            }
            /**
             * res就是筛选出来符合条件的数据，这个数据需要传回到父组件中进行渲染
             * 如何把数据传回到父组件中呢？
             * 答：vue专门提供了一个方法可以把数据从子组件中传到父组件中使用
             * 语法是：
             * 1、子组件中：this.$emit('自定义事件名', 传递的数据)
             * 2、父组件中：在组件标签中通过v-on绑定自定义事件名，然后再事件处理函数中
             * 通过参数的形式接收子组件传入的数据
             * */ 
            // res 表示筛选出来的数据 ，true表示此刻在进行筛选操作
            this.$emit('filterEvent', res, true)
        },
        
        // 撤销条件时候触发
        handleFiltersCancel(){
            this.airport = "",        // 机场
            this.flightTimes = "",    // 出发时间
            this.company = "",        // 航空公司
            this.airSize = "",        // 机型大小\
            // 子传父 把所有数据传回到父组件中渲染
            this.$emit('filterEvent', this.data.flights)
        },
    }
}
</script>

 